<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../stores/counter'
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton } from 'element-plus'
import { Operation } from '@element-plus/icons-vue'

const { locale } = useI18n()
const appStore = useAppStore()

const currentLanguage = computed(() => {
  return locale.value === 'zh' ? '中文' : 'English'
})

const languages = [
  { code: 'zh', name: '中文', flag: '🇨🇳' },
  { code: 'en', name: 'English', flag: '🇺🇸' }
]

function switchLanguage(langCode: string) {
  locale.value = langCode
  appStore.setLanguage(langCode as any)
  
  // 根据语言自动切换默认模式
  if (langCode === 'zh') {
    appStore.setUserMode('professional')
  } else {
    appStore.setUserMode('simple')
  }
}
</script>

<template>
  <ElDropdown @command="switchLanguage" trigger="click">
    <ElButton text class="language-switcher">
      <Operation class="mr-1" />
      {{ currentLanguage }}
    </ElButton>
    
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem 
          v-for="lang in languages" 
          :key="lang.code"
          :command="lang.code"
          :class="{ 'is-active': locale === lang.code }"
        >
          <span class="mr-2">{{ lang.flag }}</span>
          {{ lang.name }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style scoped>
.language-switcher {
  display: flex;
  align-items: center;
  color: inherit;
}

.language-switcher:hover {
  color: #3b82f6;
}

:deep(.el-dropdown-menu__item.is-active) {
  background-color: #eff6ff;
  color: #3b82f6;
}

.dark :deep(.el-dropdown-menu__item.is-active) {
  background-color: #1e3a8a;
  color: #93c5fd;
}
</style>
